<template>
    <div>
        <el-dialog title="系统充值" :visible="true" width="600px" :modal-append-to-body="false"
            :close-on-click-modal="false" @close="handleClose">
            <el-form id="forms" ref="forms" :rules="rulesModel" :model="form" label-width="150px">
                <el-form-item label="用户名">
                    <div>{{ info.username }}</div>
                </el-form-item>
                <el-form-item label="币种" prop="coinid">
                    <el-select v-model="form.coinid" placeholder="请选择">
                        <el-option v-for="item in coinList" :disabled="item.coinid == 3" :label="item.coinname"
                            :value="item.coinid" />
                    </el-select>
                </el-form-item>
                <el-form-item label="金额" prop="amount">
                    <el-input v-model.number="form.amount" placeholder="请输入金额" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.remark" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { AddBalance } from "@/api/users.js";
import { GetEnum, coinlist } from "@/api/ctrls.js";
export default {
    props: {
        info: {
            default: {},
            type: Object
        },
    },
    data() {
        return {
            form: {}, // 详情实体
            rulesModel: {
                coinid: [
                    { required: true, message: '请选择币种', trigger: 'blur' }
                ],
                amount: [
                    { required: true, message: '请输入金额', trigger: 'blur' }
                ]
            },
            buttonLoading: false,
            coinList: [], // 币种列表
        }
    },

    mounted() {
        this.setForm();
        this.GetCoin();
    },
    methods: {
        /**关闭弹窗 */
        handleClose() {
            this.$parent.modalStatus = 0
        },
        /**表单参数初始化 */
        setForm() {
            this.form = {
                userid: this.info.userid, // 用户id
                amount: 0, // 金额
                coinid: "", // 币种id
                remark: "", // 备注
            };
        },
        /**（提交） */
        async submit() {
            try {
                try {
                    await this.$refs['forms'].validate()
                } catch (e) {
                    console.log(e)
                    return
                }
                const { success, msg } = await AddBalance(this.form)
                if (success) {
                    this.handleClose();
                }
                this.$message({
                    message: msg,
                    type: success ? 'success' : 'error'
                })
            } catch (e) {
                // 取消
                console.log(e)
            }
        },
        // 获取币种
        async GetCoin() {
            const res = await coinlist();
            this.coinList = res;
        },
    }
}
</script>

<style lang="scss" scoped>
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
</style>